<html>

<head>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<!--script type="text/javascript" src="js/jquery.jsPlumb-1.2.6-all-min.js"></script-->
<script type="text/javascript" src="js/jquery.jsPlumb-1.3.0beta-all.js"></script>
<script type="text/javascript">

"use strict";
$(function() { 
	jsPlumb.setMouseEventsEnabled(true);
	jsPlumb.Defaults.PaintStyle = {
		lineWidth: 3,
		strokeStyle: '#666'
	};
	jsPlumb.Defaults.HoverPaintStyle = {
		lineWidth: 5,
		strokeStyle: '#888'
	};
	jsPlumb.Defaults.DragOptions = { cursor: 'crosshair' };
	jsPlumb.Defaults.Endpoint = new jsPlumb.Endpoints.Dot({radius: 6});
	jsPlumb.Defaults.Connector = new jsPlumb.Connectors.Bezier(150);
	var connfunction = function(data) {
			var src = Node.get(nid2id(data.sourceId));
			var dst = Node.get(nid2id(data.targetId));
			if (data.sourceEndpoint.scope != 'center')
				src.try_attach_center(dst);
			var getcon = jsPlumb.getConnections();
			src.setmarker(getcon);
			dst.setmarker(getcon);
		};
	jsPlumb.bind('jsPlumbConnection', connfunction ); 

	var diagramnode = '<div id="node0"><img src="img/tWLS.png"></div>';
	$('#asdf').append(diagramnode);
	jsPlumb.Defaults.Container = "asdf";
	var dragpoint = jsPlumb.addEndpoint("node0", {
		anchor: "TopCenter",
		style: {fillStyle:"#999"},
		hoverPaintStyle: {fillStyle:"#f0c"},
		isSource: true,
		isTarget: true,
		endpointsOnTop: true,
		maxConnections: -1
	}); 
});

</script>

</head>

<body>
<p>Testcase:</p>
	<div id="asdf">
	</div>
</body>
